<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      #dot {
        width: 30px;
        height: 30px;
        background-color: lightblue;
        border-radius: 50%;
        /* 生成路径 */
        /* https://editor.method.ac/ */
        offset-path: path(
          "m68,232c0,1 0.29289,1.29289 1,2c0.70711,0.70711 -0.20606,-0.08743 2,-5c2.74805,-6.11949 5.60344,-13.18903 11,-24c5.59617,-11.21085 8,-17 11,-21c3,-4 4.49294,-7.23401 7,-12c1.67856,-3.19099 3.69255,-6.186 5,-8c3.30762,-4.58908 7,-8 9,-10c5,-5 7.90633,-7.10341 9,-8c2.78832,-2.28587 6,-4 9,-5c3,-1 5.17163,-2.15913 9,-1c6.90169,2.08966 11.95137,7.06595 16,10c9.88396,7.16293 16.3421,13.83228 25,20c6.56644,4.67781 16.22885,9.72961 21,14c5.26884,4.71585 9.29362,8.7265 13,13c3.27602,3.77727 4,6 5,8c2,4 4.41589,7.76108 6,11c1.38936,2.84073 1.48756,8.13045 3,13c2.25894,7.27304 3.79393,13.08743 6,18c1.83203,4.07967 3.80617,16.03043 5,23c0.86089,5.02582 1,7 1,9c0,1 -0.16019,-1.01291 0,-2c1.01308,-6.24289 3.35724,-10.25406 6,-16c4.873,-10.59499 18.31506,-24.74179 24,-32c5.30435,-6.77229 7.75259,-11.16994 14,-20c11.55145,-16.32678 19.73764,-27.23738 27,-35c4.83084,-5.16362 10.54965,-10.39626 15,-15c6.40781,-6.62871 13.66483,-12.40266 22,-19c6.74515,-5.33882 13.34296,-11.27296 26,-17c14.40536,-6.5181 27.94672,-9.49874 35,-10c0.9975,-0.07089 2.87766,2.066 4,4c1.80972,3.11848 4.57083,4.64457 10,14c4.48938,7.73599 10.19669,17.89351 15,27c6.25928,11.86682 13.36954,27.23531 17,36c3.42282,8.26343 6.34518,15.17697 8,20c0.72568,2.11504 1.26129,6.25745 3,12c1.04483,3.45085 2,6 2,7c0,1 -0.57956,2.08582 0,4c1.04483,3.45085 4,7 4,8c0,1 0.77023,1.02675 1,2c0.51373,2.17625 1.02676,4.77025 2,5c2.17624,0.51375 0.88562,-5.04059 2,-8c7.26495,-19.29301 15.65054,-34.57292 24,-48c5.43677,-8.74309 12.91895,-21.05859 18,-28c2.95331,-4.03461 10.89526,-11.02829 24,-24c7.55487,-7.4782 14.42334,-14.42824 20,-19c4.37469,-3.58638 7.88153,-7.19028 11,-9c1.93402,-1.12234 3.01807,-1.18911 4,-1c5.28802,1.01837 10.29944,8.74249 18,18c7.29138,8.76561 15.43213,18.89731 29,38c3.37646,4.75388 9.28333,12.80606 14,20c6.39429,9.75261 10.24042,16.33781 13,23c1.95129,4.71088 3.49347,6.87856 4,10c0.16016,0.98709 1.17755,4.91447 4,11c3.20435,6.90886 4.9176,11.38687 6,14c0.76538,1.84776 -0.70709,3.29289 0,4c0.70709,0.70711 1,1 1,2c0,1 0.69257,2.186 2,4c0.8269,1.14728 0.23462,2.15225 1,4c0.5412,1.30655 1.27429,0.11505 2,-2c1.65485,-4.82303 4.03766,-12.98279 15,-37c5.01721,-10.99216 8.29248,-15.78876 14,-24c9.49921,-13.66623 15.15533,-21.87389 20,-28c3.1015,-3.92184 7,-9 10,-12c3,-3 5.71411,-7.21167 8,-10c2.68976,-3.28101 5,-5 7,-7l2,-2"
        );
        animation: 3s move linear infinite;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div id="dot"></div>
  </body>
</html>
